<template>
    <div class="addArticle">
        <div class="topNav">
            <el-divider class="topLine"><i class="lineIcon el-icon-document-copy"></i><span
                    class="lineTitle" id="optionArticle">新增文章内容</span></el-divider>
        </div>
        <div class="articleSetNav">
        </div>
        <div class="addContent">
            <!--开启表单验证：:rules="rules" ref="moudle" 表单右侧验证符号 status-icon -->
            <el-form :model="article" status-icon :rules="rules" label-width="100px" ref="article"
                     :label-position="labelPosition">
                <!--<el-form-item label="关联moduleId" prop="moduleId">
                    <el-input id="moduleId" class="inputLine" v-model="article.moduleId"></el-input>
                </el-form-item>-->
                <el-form-item label="文章标题" prop="name">
                    <el-input id="name" class="inputLine" v-model="article.name"></el-input>
                </el-form-item>
                <el-form-item label="seo标题" prop="seoTitle">
                    <el-input id="seoTitle" class="inputLine" v-model="article.seoTitle"></el-input>
                </el-form-item>
                <el-form-item label="SEO关键字" prop="seoKeyword">
                    <el-tag class="keyTags" id="seoKeyword"
                            :key="tag"
                            v-for="tag in seoKeyword"
                            closable
                            :disable-transitions="false"
                            @close="handleClose(tag)">
                        {{tag}}
                    </el-tag>
                    <el-input
                            class="input-new-tag"
                            v-if="inputVisible"
                            v-model="seoKey"
                            ref="saveKeyInput"
                            size="small"
                            @keyup.enter.native="handleInputConfirm"
                            @blur="handleInputConfirm"
                    >
                    </el-input>
                    <el-button v-else class="keyTagsInput button-new-tag" size="small" @click="showInput">+ SEO关键字
                    </el-button>
                </el-form-item>

                <el-form-item label="seo描述" prop="seoDescription">
                    <el-input id="seoDescription" class="inputLine" v-model="article.seoDescription"></el-input>
                </el-form-item>

                <el-form-item label="文章图片" prop="picList">
                    <big-file :upload-tile="'上传文章封面'" :input-id="'upload-article-icon'"
                              :suffix-type="['jpg','jpeg','png','gif']"
                              :uniId="article.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                              :after-upload="afterUpload"></big-file>
                    <span class="uploadAdvice">封面上传建议尺寸：640*340px</span>
                </el-form-item>

                <el-row class="upload-file-list" v-if="files.length>0">
                    <el-col :span="20">
                        <div class="file-image" v-for="file in files" :key="file.index">
                            <el-image class="img-url"
                                      :src="file"
                                      :preview-src-list="files"
                            >
                            </el-image>
                            <div class="img-after">
                                <!--<span class="glyphicon glyphicon-trash"></span>
                                <p>刪除</p>-->
                                <el-button class="img-del" type="danger" icon="glyphicon glyphicon-trash"
                                           @click="removeImg(file)"></el-button>
                            </div>

                        </div>
                    </el-col>
                </el-row>

                <el-form-item label="文章视频" prop="articleVideo">
                    <big-file :upload-tile="'上传文章视频'" :input-id="'upload-articleVideo-icon'" :suffix-type="['mp4']"
                              :uniId="article.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                              :after-upload="afterArticleVideoUpload"></big-file>
                    <el-row class="upload-icon">
                        <el-col :span="14">
                            <OSSPlayer player-id="av" ref="ossPlayer" class="articleVideo"></OSSPlayer>
                        </el-col>
                    </el-row>
                </el-form-item>

                <!--<el-form-item label="加密视频" prop="articleVod">
                    <vod-file :upload-tile="'上传VOD视频'" :input-id="'upload-vod-icon'" :suffix-type="['mp4']"
                              :uniId="article.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_ACTIVE.key"
                              :after-upload="afterVodUpload" :url="'vod-simple'"></vod-file>
                    <el-row class="upload-icon">
                        <el-col :span="12">
                            <OSSPlayer player-id="vod-player" ref="ossPlayer"></OSSPlayer>
                            <video id="vod" class="articleVideo hidden" :src="article.articleVod"
                                   controls="controls"></video>
                        </el-col>
                    </el-row>
                </el-form-item>-->

                <el-form-item label="视频封面" prop="videoCover">
                    <big-file :upload-tile="'上传封面图片'" :input-id="'upload-videoCover-icon'"
                              :suffix-type="['jpg','jpeg','png','gif']"
                              :uniId="article.uniId" :use-type="SOURCE_USE_TYPE.SOURCE_PUBLIC.key"
                              :after-upload="afterVideoCoverUpload"></big-file>
                    <el-row class="upload-icon" >
                        <el-col :span="14">
                            <img v-if="article.videoCover" :src="article.videoCover" class="img-responsive"/>
                        </el-col>
                    </el-row>
                </el-form-item>


                <!--<el-form-item label="视频标题" prop="videoTitle">
                <el-input id="videoTitle" class="inputLine" v-model="article.videoTitle" ></el-input>
                </el-form-item>


                <el-form-item label="视频介绍" prop="videoDesc">
                <el-input id="videoDesc" class="inputLine" v-model="article.videoDesc" ></el-input>
                </el-form-item>

-->
                <!--<el-form-item label="时长" prop="videoTime">
                    <el-input id="videoTime" class="inputLine" v-model="article.videoTime" disabled></el-input>
                </el-form-item>-->
                <el-form-item label="模块内容" prop="articleContent">
                    <el-input id="content" v-model="article.articleContent"></el-input>
                </el-form-item>
                <!--<el-form-item label="收费" prop="videoCharge">

                    <el-select id="videoCharge" class="inputLine" v-model="article.videoCharge" placeholder="请选择">
                        <el-option
                                v-for="item in charge"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>-->


                <el-form-item label="视频分类" prop="videoType">
                    <el-select id="videoType" class="inputLine" v-model="article.videoType" placeholder="请选择">
                        <el-option
                                v-for="item in options"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="文章类型" prop="typeId">
                    <el-select id="typeId" class="inputLine" v-model="article.typeId" placeholder="请选择">
                        <el-option
                                v-for="item in ARTICLE_TYPE"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>

                <!--<el-form-item label="文章路径" prop="path">
                    <el-input id="path" class="inputLine" v-model="article.path"></el-input>
                </el-form-item>-->
                <el-form-item label="首页显示" prop="indexShow">
                    <el-radio-group class="indexShow" v-model="article.indexShow" >
                        <el-radio-button :label="INDEX_SHOW.SHOW.value"></el-radio-button>
                        <el-radio-button label="文章中心显示"></el-radio-button>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="显示" prop="isShow">
                    <el-switch id="isShow" class="inputLine"
                               v-model="article.isShow"
                               active-color="#13ce66"
                               inactive-color="#ff4949"
                               :active-value="1"
                               :inactive-value="0"
                    >
                    </el-switch>
                </el-form-item>


                <!--<el-form-item label="点击量" prop="clickNum">
                    <el-input id="clickNum" class="inputLine" v-model="article.clickNum"></el-input>
                </el-form-item>-->


                <el-form-item label="排序" prop="sort">
                    <el-input id="sort" class="inputLine" v-model="article.sort"></el-input>
                </el-form-item>


                <!--<el-form-item label="价格" prop="price">
                    <el-input id="price" class="inputLine" v-model="article.price"></el-input>
                </el-form-item>-->


                <el-form-item label="级别" prop="level">
                    <el-select id="level" class="inputLine" v-model="article.level" placeholder="请选择">
                        <el-option
                                v-for="item in level"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item label="状态" prop="status">
                    <el-select id="status" class="inputLine" v-model="article.status" placeholder="请选择">
                        <el-option
                                v-for="item in status"
                                :key="item.key"
                                :label="item.value"
                                :value="item.key"
                                :disabled="item.disabled">
                        </el-option>
                    </el-select>
                </el-form-item>


                <!--<el-form-item label="报名预购" prop="enrollBuy">
                    <el-input id="enrollBuy" class="inputLine" v-model="article.enrollBuy"></el-input>
                </el-form-item>-->

                <el-form-item>
                    <!--这里save(formName)方法保存，ref别名的article-->
                    <el-button id="submitBtn" type="primary" @click="save('article')">立即创建</el-button>
                    <el-button @click="resetForm('article')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>

<script>
    //import FileIcon from "../../../components/FileIcon";
    import BigFile from "../../../components/BigFile";
    //import VodFile from "../../../components/VodFile";
    import OSSPlayer from "../../../components/OSSPlayer";

    export default {
        name: "AddArticle",
        components: {BigFile, OSSPlayer},
        props: {
            list: {
                type: Function,
                default: null
            },
        },
        data() {
            let nameValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("文章标题不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("文章标题长度至少3位"));
                } else {
                    callback();
                }
            }
            let seoTitleValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("seo标题不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("seo标题长度至少3位"));
                } else {
                    callback();
                }
            }

            let seoDescriptionValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("seo描述不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("seo描述长度至少3位"));
                } else {
                    callback();
                }
            }
            let articleVideoValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("文章视频不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("文章视频长度至少3位"));
                } else {
                    callback();
                }
            }
            let videoCoverValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("视频封面不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("视频封面长度至少3位"));
                } else {
                    callback();
                }
            }
            let videoTitleValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("视频标题不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("视频标题长度至少3位"));
                } else {
                    callback();
                }
            }
            let videoDescValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("视频介绍不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("视频介绍长度至少3位"));
                } else {
                    callback();
                }
            }
            let pathValidate = (rule, value, callback) => {
                function getLength(str) {
                    //如果为中文，替换为ccc，1个中文字符计算长度=1
                    return str.replace(/[^x00-xff]/g, 'c').length;
                }

                if (value === '') {
                    callback(new Error("文章路径不能为空"));
                } else if (getLength(value) < 2) {
                    callback(new Error("文章路径长度至少3位"));
                } else {
                    callback();
                }
            }

            return {
                message: '这里是更新文章/产品表页面',
                article: {
                    uniId: '',
                    moduleId: '',
                    name: '',
                    seoTitle: '',
                    seoKeyword: '',
                    seoDescription: '',
                    picList: [],
                    articleVideo: '',
                    articleVod: '',
                    videoCover: '',
                    videoTitle: '',
                    videoDesc: '',
                    videoTime: 0,
                    videoCharge: '',
                    videoType: '',
                    videoUserId: '',
                    typeId: '',
                    path: '',
                    isShow: '',
                    articleContent: '',
                    clickNum: '',
                    sort: '',
                    createTime: '',
                    updateTime: '',
                    iCreateTime: '',
                    iUpdateTime: '',
                    price: '',
                    level: '',
                    status: '',
                    enrollBuy: '',
                    moduleUniId: ''
                },
                labelPosition: 'left',

                rules: {
                    name: [
                        {validator: nameValidate, trigger: 'blur'}
                    ],
                    seoTitle: [
                        {validator: seoTitleValidate, trigger: 'blur'}
                    ],

                    seoDescription: [
                        {validator: seoDescriptionValidate, trigger: 'blur'}
                    ],
                    /*articleVideo: [
                        {validator: articleVideoValidate, trigger: 'blur'}
                    ],
                    videoCover: [
                        {validator: videoCoverValidate, trigger: 'blur'}
                    ],
                    videoTitle: [
                        {validator: videoTitleValidate, trigger: 'blur'}
                    ],
                    videoDesc: [
                        {validator: videoDescValidate, trigger: 'blur'}
                    ],
                    path: [
                        {validator: pathValidate, trigger: 'blur'}
                    ],*/


                },

                /*seo关键字*/
                inputVisible: false,
                seoKey: '',
                seoKeyword: [],

                options: VIDEO_TYPE,
                charge: VIDEO_CHARGE,
                isShow: YES_OR_NO,
                level: LEVEL,
                status: STATUS,
                ARTICLE_TYPE: ARTICLE_TYPE,
                INDEX_SHOW:INDEX_SHOW,
                //级联选择
                value: [],
                //文件上传
                SOURCE_USE_TYPE: SOURCE_USE_TYPE,
                //文件列表
                files: [],
                //获取登录用户
                empLogin:Tool.getEmpLogin(),
            }
        },
        mounted() {
            let moduleParentId = SessionStorage.get(ARTICLE_MODULE_PARENTID) || "";
            if (this.$route.params.article != null) {
                this.article = this.$route.params.article;
                this.article.moduleUniId = moduleParentId;
                if (!Tool.isEmpty(this.article.seoKeyword.toString())) {
                    this.seoKeyword = this.article.seoKeyword;
                } else {
                    this.seoKeyword = [];
                }
                if (!Tool.isEmpty(this.article.picList.toString())) {
                    this.files = this.article.picList;

                } else {
                    this.files = [];
                }
                //初始化：视频播放
                if (!Tool.isEmpty(this.article.articleVideo)) {
                    this.$refs.ossPlayer.playURL(this.article.articleVideo, this.article.videoCover);
                }
                //首页显示回显
                if (this.article.indexShow === "ON") {
                    this.article.indexShow = INDEX_SHOW.SHOW.value;
                } else {
                    this.article.indexShow = INDEX_SHOW.UNSHOW.value;
                }
                //传入userId
                if(Tool.isEmpty(this.article.videoUserId)){
                    this.article.videoUserId=this.empLogin.uniId;
                }

                let optionArticle = document.getElementById("optionArticle");
                let submitBtn = document.getElementById("submitBtn");
                optionArticle.innerHTML = '更新文章数据';
                submitBtn.innerHTML = "立即更新";
            } else {
                //获取article在session中保存的articleModuleId
                let moduleId = SessionStorage.get(ARTICLE_MODULE_ID) || "";
                if (moduleId !== null) {
                    this.article = {};
                    this.article.moduleId = moduleId;
                    this.article.moduleUniId = moduleParentId;
                    this.article.indexShow = INDEX_SHOW.UNSHOW.value;
                    this.article.videoUserId=this.empLogin.uniId;
                }
            }
            //富文本
            //获取文件分片大小
            function getShardFile(shardIndex, shardSize,files){
                let _this = this;
                let file = files;
                let start = (shardIndex - 1) * shardSize; //分片起始大小
                let end = Math.min(file.size, start + shardSize);
                //从start→end截取当前的分片数据
                let shardFile = file.slice(start, end);
                return shardFile;
            }
            function upload(param,file){
                let shardTotal = param.shardTotal;
                let shardIndex = param.shardIndex;
                let shardSize = param.shardSize;
                let files=file;
                let shardFile = getShardFile(shardIndex, shardSize,files);
                let token = Tool.getEmpLogin().token;
                let fileReader = new FileReader();
                Progress.show(parseInt((shardIndex - 1) * 100 / shardTotal));
                //先加载fileReader，读取到e，再进行数据shardFile转换
                fileReader.onload = function (e) {
                    let base64 = e.target.result;
                    param.shard = base64;
                    $.ajax({
                        url: 'http://127.0.0.1:8899/source/admin/oss/append',//后台文件上传接口
                        type: 'POST',
                        data: JSON.stringify(param), //转json上传fileDto对象
                        dataType: "json",
                        headers: {
                            'token': token, //加入请求头token校验
                        },
                        processData: false,
                        contentType: "application/json;charset=UTF-8",
                        success: function (data) {
                            let resp = data.data;
                            Progress.show(parseInt(shardIndex * 100 / shardTotal));
                            //判断分片的shardIndex和shardTotal值，是否分片上传完毕
                            if (shardIndex < shardTotal) {
                                param.shardIndex = param.shardIndex + 1;
                                upload(param);
                            } else {
                                Progress.hide();
                                $('#content').summernote('insertImage', data.responseData.path, 'img');
                            }
                        }
                    });
                }
                //需要放在fileReader之后，生成shardFile
                fileReader.readAsDataURL(shardFile);
            }

            //1.初始化富文本
            $("#content").summernote({
                lang: 'zh-CN',
                focus: true,
                height: 300,
                //自定义工具栏
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'superscript', 'subscript']],
                    ['fontname', ['fontname']],
                    ['color', ['color']],
                    ['para', ['ul', 'ol', 'paragraph', 'fontsize', 'height', 'hr']],
                    ['table', ['table']],
                    ['insert', ['link', 'picture', 'video']],//插入集合
                    ['view', ['codeview', 'help']]
                ],
                callbacks: {
                    //这里原生js暴露的方法名必须相同
                    onImageUpload: function (files) {
                        let _this = this;
                        let file = files[0];
                        let formData = new FormData();
                        formData.append('file', file);
                        let token = Tool.getEmpLogin().token;

                        /*************************************************************/
                        let shardKey16 = hex_md5(file.name + file.size + file.type); //md5:16进制处理file
                        let shardKey10 = parseInt(shardKey16, 16);//转换为10进制
                        //62进制(短key)：26个大写字母+26个小写字母+10个阿拉伯数字
                        let shardKey62 = Tool.md_10to64(shardKey10);

                        //file类型判断["jpg","jpeg","png","gif"]
                        let suffixType = ["jpg", "jpeg", "png", "gif"];
                        let fileName = file.name;
                        let suffix = fileName.substring(fileName.lastIndexOf(".") + 1, fileName.length).toLowerCase();
                        let validateSuffix = false;
                        //循环后缀类型
                        for (let i = 0; i < suffixType.length; i++) {
                            if (suffixType[i].toLowerCase() === suffix) {
                                validateSuffix = true;
                                break;
                            }
                        }
                        if (!validateSuffix) {
                            toast.warning("文件格式不正确，只支持上传：" + suffixType.join(",") + "文件");
                            return;
                        }

                        //文件分片shard
                        let shardSize = 1024 * 1024; //每1MB为一个分片，
                        let startIndex = 1; //分片起始索引，1为第一个分片
                        let size = file.size;//文件大小
                        let shardTotal = Math.ceil(size / shardSize);//分片总数，向上取整1.1=2
                        let contentType = file.type;
                        /**
                         * 统一请求参数，使用formData传递，需要将file中的shardFile转为base64的字符串string
                         * fileReader加载时，接收参数e,转为base64 = e.target.result
                         * base64字符串：文件说明+","+base64码(文件内容)
                         * 在fileReader包裹后，需要_this=this;
                         */
                        let param = {
                            'size': size,
                            'shardIndex': startIndex,
                            'shardSize': shardSize,
                            'shardTotal': shardTotal,
                            'name': file.name,
                            'suffix': suffix,
                            'shardKey': shardKey62,
                            'contentType': contentType,
                            'moduleId': '',
                            'useType': 'T',
                        };
                        $.ajax({
                            url: 'http://127.0.0.1:8899/source/admin/check/file/' + param.shardKey,//后台文件上传接口
                            type: 'GET',
                            headers: {
                                'token': token,
                            },
                            success: function (data) {
                                let fileDto = data.responseData;
                                if (!fileDto) {
                                    param.shardIndex = 1;
                                    upload(param,file);

                                } else if (fileDto.shardIndex === fileDto.shardTotal) {
                                    toast.success("文件急速秒传成功！");
                                    $('#content').summernote('insertImage', data.responseData.path, 'img');
                                } else {
                                    param.shardIndex = fileDto.shardIndex + 1;
                                    upload(param,file);
                                }
                            }
                        });
                    },

                }
            });
            //2.获取当前module的富文本内容
            $("#content").summernote('code', this.article.articleContent);

        },
        methods: {

            //1.新增文章/产品表
            save(formName) {

                let responseMsg = '';

                let content = $("#content").summernote('code');
                this.article.articleContent = content;
                this.article.seoKeyword = this.seoKeyword;
                this.article.picList = this.files;
                if (this.article.indexShow.indexOf("首页") !== -1) {
                    this.article.indexShow = INDEX_SHOW.SHOW.key;
                } else {
                    this.article.indexShow = INDEX_SHOW.UNSHOW.key;
                }
                //保存之前清空
                //this.article.articleVod="";
                //前端校验
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/article/save', this.article)
                            .then((response) => {
                                let resp = response.data;
                                responseMsg = response;
                                if (resp.success) {
                                    //this.article={};
                                    this.$router.push("/business/article/set");
                                    //引入全局变量toast提示
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '填写内容错误',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.$notify({
                            title: '填写内容错误',
                            message: '请按照提示内容填写正确信息',
                            position: "top-right",
                            type: 'warning'
                        });
                        return false;
                    }
                });

            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
            //SEO标签
            handleClose(tag) {
                this.seoKeyword.splice(this.seoKeyword.indexOf(tag), 1);
            },
            showInput() {
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveKeyInput.$refs.input.focus();
                });
            },
            handleInputConfirm() {
                let seoKey = this.seoKey;
                if (seoKey) {
                    this.seoKeyword.push(seoKey);
                }
                this.inputVisible = false;
                this.seoKey = '';
            },
            //级联选择器
            handleChange(value) {
                console.log(value);
            },
            //接收文件上传组件传入的resp
            afterUpload(resp) {
                if (resp.success) {
                    let moduleId = this.article.uniId;
                    let picPath = resp.responseData.path;
                    if (!Tool.isEmpty(moduleId)) {
                        this.$axios.post(process.env.VUE_APP_SERVER + '/business/admin/article/savePicList',
                            {
                                moduleId: moduleId,
                                picPath: picPath
                            })
                            .then((response) => {
                                let resp = response.data;
                                if (resp.success) {
                                    let pics = [];
                                    for (let i = 0; i < resp.responseData.length; i++) {
                                        pics.push(resp.responseData[i]);
                                    }
                                    this.files = pics;
                                    toast.success("保存成功", "bottom-end");
                                } else {
                                    this.$notify({
                                        title: '保存失败，请联系管理员',
                                        message: resp.responseMsg,
                                        position: "top-right",
                                        type: 'warning'
                                    });
                                }
                            })
                    } else {
                        this.files.push(picPath);
                    }
                }
            },
            afterArticleVideoUpload(resp) {
                this.article.articleVideo = resp.responseData.path;
                this.getVideoTime();
                this.$refs.ossPlayer.playURL(resp.responseData.path);
            },
            afterVideoCoverUpload(resp) {
                if (resp.success) {
                    this.article.videoCover = resp.responseData.path;
                }
            },
            afterVodUpload(resp) {
                this.article.articleVod = resp.responseData.vod;
                this.getVodTime();
                //调取播放器
                this.$refs.ossPlayer.playURL(resp.responseData.path);
            },
            //获取视频时间
            getVideoTime() {
                let _this = this;
                //增加延时，避免获取不到视频时长
                setTimeout(function () {
                    let video = document.getElementById("av");
                    _this.article.videoTime = parseInt(video.duration, 10);
                }, 1000);
            },
            //获取VOD时长，这里做测试普通视频/加密视频时长
            getVodTime() {
                let _this = this;
                setTimeout(function () {
                    let video = document.getElementById("av");
                    _this.article.videoTime = parseInt(video.duration, 10);
                }, 1000);
            },
//删除图片
            removeImg(file) {
                let boxMessage = document.querySelectorAll(".el-message-box .el-message-box__content .el-message-box__container .el-message-box__message p");
                for (let i = 0; i < boxMessage.length; i++) {
                    boxMessage[i].style = "word-wrap:break-word";
                }
                this.$confirm('确认删除 【' + file + '】文件？', '删除图片操作', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.files.splice(this.files.indexOf(file), 1);
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消删除'
                    });
                });

            },
        },
    }
</script>

<style scoped>
    /*顶部line样式*/
    .topNav {

    }

    /deep/ .el-divider__text {
        background-color: #1d7dd6;
        padding: 8px 20px;
    }

    .topLine {
        background-color: #1d7dd6;
    }

    .lineIcon {
        font-size: 22px;
        color: #ffffff;
        position: relative;
        margin-right: 5px;
    }

    .lineTitle {
        position: relative;
        font-size: 16px;
        color: #ffffff;
    }

    /*文章/产品表设置导航*/
    .articleSetNav {
        max-width: 400px;
        margin: 5px auto;

    }

    .articleSetNavTile {
        cursor: pointer;
    }

    /*内容区位置*/
    .addContent {
        margin-left: 5%;
        margin-top: 35px;
        margin-right: 5%;
    }

    /deep/ .el-form-item {
        margin-bottom: 5px;
    }

    /*输入行控制*/
    .inputLine {
        max-width: 350px;
        float: left;
    }

    /*关键字标签*/
    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }

    .titleLeft {
        float: left;
    }

    /*SEO描述*/
    .textAreaWidth {
        max-width: 400px;
        float: left;
    }

    /*图片上传：取消upload打开的input默认按钮*/
    /deep/ input[type=file] {
        display: block;
        margin-left: -400px;

    }
    .upload-icon{
        margin-top: -50px;
        margin-bottom: 10px;
    }
    .upload-icon img{
        padding: 5px;
        border: 1px solid #cccccc;
    }

    /*错误提示*/
    #articleTitle {
        float: left;
    }

    /deep/ .el-form-item__error {
        float: left;
        position: relative;
        line-height: 30px;
        margin-left: 10px;
    }

    /*提示框的字符颜色*/
    /deep/ .el-input__prefix, .el-input__suffix {
        color: #44cd3f;
        font-size: 18px;
    }

    /deep/ .el-input__icon {
        color: #44cd3f;
        font-size: 18px;
    }

    /*是否显示*/
    /deep/ .el-switch {
        line-height: 40px;
    }

    .upload-icon {
        margin-top: -50px;
        margin-bottom: 10px;
    }

    /*视频上传*/
    .articleVideo {
        width: 100%;
        z-index: -1;
    }

    /*文件列表*/
    .upload-file-list {
        margin-bottom: 10px;
        margin-top: -40px;
    }

    /*每一行高度*/
    /deep/ .el-table td, .el-table th {
        padding: 0;
    }

    /*关键字*/
    .keyTags {
        float: left;
        margin-right: 8px;
    }

    .keyTagsInput {
        float: left;
    }

    .input-new-tag {
        max-width: 230px;
        float: left;
    }

    /*文件列表*/

    .upload-file-list {
        margin-bottom: 10px;
        margin-top: -40px;
        margin-left: 13%;
    }

    .upload-file-list .el-image {
        width: 150px;
        float: left;
        padding: 5px;
        border: 1px solid #cccccc;
        margin-right: 5px;
    }

    .upload-file-list .file-image .img-url {
        position: relative;
    }

    /*.upload-file-list .file-image .img-url:hover:after{
        position: absolute;
        content: "删除 X";
        width: 50px;
        height: 20px;
        bottom: 5px;
        right: 5px;
        background-color: #409EFF;
        color: white;
        !*点击*!
        pointer-events: auto;
    }*/
    .upload-file-list .file-image .img-after {
        position: relative;
        float: left;
        margin-top: 56px;
        margin-left: -37px;
        color: white;
    }

    .upload-file-list .file-image .img-after .img-del {
        padding: 5px;
        border-radius: 0;
        background-color: #e92322;
        border: 1px solid #ffffff;
    }

    .upload-file-list .file-image .img-after .img-del:hover {
        background-color: #f6504f;
    }
    /*首页显示*/
    .indexShow{
        float: left;
    }
    /*封面上传建议*/
    .uploadAdvice{
        position: absolute;
        top: 0;
        left: 130px;
        color: #2a92ee;
    }
</style>